<template>
  <!-- 表格搜索 -->
  <el-row class="table-search filter-container no-select">
    <!-- 简单搜索 -->
    <el-col :span="24" class="simple-filter">
      <!-- 按钮功能区 -->
      <template v-for="item in buttons" v-if="buttons && buttons.length > 0">
        <el-button
          v-if="item.show ? item.show(tableSelection, item) : true"
          plain
          :type="item.type"
          :icon="item.icon"
          :disabled="item.disabled ? item.disabled(tableSelection, tableTotal, item) : false"
          @click="item.event ? item.event(tableSelection, tableTotal, item, $event) : false"
        >
          {{ item.$label }}
        </el-button>
      </template>

      <!-- 简单搜索框区 -->
      <div class="simple-search">
        <el-input v-model="filters.searchText" class="input-with-select" placeholder="请输入内容" @keyup.enter.native="simpleSearch">
          <el-button slot="append" icon="el-icon-search" title="搜索" @click="simpleSearch" />
        </el-input>

        <el-button v-if="filters.isComplex" type="primary">高级搜索<i class="el-icon-zoom-in el-icon--right" /></el-button>

        <!-- 刷新 -->
        <el-button v-if="filters.isComplex" plain type="info" icon="el-icon-refresh" title="刷新" />
      </div>
    </el-col>
    <!--    &lt;!&ndash; 高级搜索 &ndash;&gt;-->
    <!--    <el-col v-show="filters.isComplex" :span="24" class="complex-filter" ref="complexFilter">-->
    <!--      <el-collapse-transition>-->
    <!--        <el-form :ref="filters.formRef" :model="filters.whereFields" label-width="100px" class="pane">-->
    <!--          <el-row :gutter="10">-->
    <!--            <el-col :xs="12" :sm="8" :md="6" :lg="5" :xl="4">-->
    <!--              <el-form-item label="名称" prop="name">-->
    <!--                <el-input v-model="filters.whereFields.name" placeholder="请输入名称" />-->
    <!--              </el-form-item>-->
    <!--            </el-col>-->

    <!--            <el-col :xs="12" :sm="8" :md="6" :lg="5" :xl="4">-->
    <!--              <el-form-item label="昵称" prop="nick_name">-->
    <!--                <el-input v-model="filters.whereFields.nick_name" placeholder="请输入昵称" />-->
    <!--              </el-form-item>-->
    <!--            </el-col>-->

    <!--            <el-col :xs="12" :sm="8" :md="6" :lg="5" :xl="4">-->
    <!--              <el-form-item label="手机号" prop="mobile">-->
    <!--                <el-input v-model="filters.whereFields.mobile" placeholder="请输入手机号" />-->
    <!--              </el-form-item>-->
    <!--            </el-col>-->

    <!--            <el-col :xs="12" :sm="8" :md="6" :lg="5" :xl="4">-->
    <!--              <el-form-item label="邮箱" prop="email">-->
    <!--                <el-input v-model="filters.whereFields.email" placeholder="请输入邮箱" />-->
    <!--              </el-form-item>-->
    <!--            </el-col>-->

    <!--            <el-col :xs="12" :sm="8" :md="6" :lg="5" :xl="4">-->
    <!--              <el-form-item label="状态" prop="status">-->
    <!--                <el-select v-model="filters.whereFields.status" clearable placeholder="请选择状态">-->
    <!--                  <el-option label="禁用" value="0" />-->
    <!--                  <el-option label="正常" value="1" />-->
    <!--                </el-select>-->
    <!--              </el-form-item>-->
    <!--            </el-col>-->

    <!--            <el-col :xs="12" :sm="8" :md="6" :lg="5" :xl="5">-->
    <!--              <el-form-item label="创建时间" prop="created_at">-->
    <!--                <el-date-picker-->
    <!--                  v-model="filters.whereFields.created_at"-->
    <!--                  type="daterange"-->
    <!--                  range-separator="至"-->
    <!--                  start-placeholder="开始日期"-->
    <!--                  end-placeholder="结束日期"-->
    <!--                />-->
    <!--              </el-form-item>-->
    <!--            </el-col>-->

    <!--            <el-col :xs="12" :sm="8" :md="6" :lg="5" :xl="4">-->
    <!--              <el-form-item no-label class="no-label">-->
    <!--                <el-button @click="resetComplexForm">重置条件</el-button>-->
    <!--                <el-button type="primary" @click="getList">搜索</el-button>-->
    <!--              </el-form-item>-->
    <!--            </el-col>-->
    <!--          </el-row>-->
    <!--        </el-form>-->
    <!--      </el-collapse-transition>-->
    <!--    </el-col>-->
  </el-row>
</template>

<script>
export default {
  name: 'TableSearch'
  , props: {
    filters: {
      type: Object
      , default() {
        return {
          isComplex: false
          , searchText: ''
        }
      }
    }
    , buttons: {
      type: Array
      , default() {
        return []
      }
    }
    , tableSelection: {
      type: Array
    }
    , tableTotal: {
      type: Number
      , default() {
        return 0
      }
    }
  }
  , data() {
    return {
    }
  }
  , methods: {
    simpleSearch() {
      this.$emit('simpleSearch', this.filters.searchText)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "@/styles/element-variables.scss";
  $bg: #fff;
  $space: 0.625rem;

  .complex-table.table-container .table-search.filter-container {
    background-color: $bg;
    padding: 0;

    .simple-filter {
      padding: $space;
      position: relative;
      .simple-search{
        position: absolute;
        right: $space;
        top: $space;
        .input-with-select{
          width: 13.75rem;
          margin-right: $space;
        }
      }
    }

    .complex-filter{
      padding: $space $space 0 $space;
      border-top: 1px solid $--border-color-light;
      .el-form-item{
        margin-bottom: $space;
      }
    }
  }
</style>
